iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0
JavaScript

Javascript網頁程式管理系統系列 第 6

day 6 javascript智慧停車場網頁程式管理系統

  • 分享至 

  • xImage
  •  

今天是第六天我們可以寫一個javascript智慧停車場網頁程式管理系統,現在停車是大家生活中需要面對的問題,有時候透過智慧停車場系統能更好的更快速的找到車位,以下是我的程式碼

1. HTML:建立基礎的網頁界面

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧停車場管理系統</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>智慧停車場管理系統</h1>

    <div class="parking-lot-info">
        <p>總車位數量: <span id="total-spaces">50</span></p>
        <p>剩餘車位: <span id="available-spaces">50</span></p>
    </div>

    <div class="controls">
        <button id="enter-button">車輛進入</button>
        <button id="exit-button">車輛離開</button>
    </div>

    <div class="log">
        <h3>車輛進出紀錄</h3>
        <ul id="log-list"></ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS:設計基本的樣式

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    text-align: center;
}

h1 {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    margin: 0;
}

.parking-lot-info {
    margin: 20px 0;
}

.controls {
    margin: 20px 0;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 10px;
    cursor: pointer;
    border: none;
    background-color: #28a745;
    color: white;
}

button#exit-button {
    background-color: #dc3545;
}

button:disabled {
    background-color: #ccc;
}

.log {
    margin-top: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#log-list {
    list-style: none;
    padding: 0;
}

#log-list li {
    padding: 5px;
    background-color: #e9e9e9;
    margin: 5px 0;
}

3. JavaScript:處理停車場進出邏輯

document.addEventListener("DOMContentLoaded", function() {
    let totalSpaces = 50;
    let availableSpaces = 50;

    const totalSpacesElement = document.getElementById("total-spaces");
    const availableSpacesElement = document.getElementById("available-spaces");
    const logList = document.getElementById("log-list");
    const enterButton = document.getElementById("enter-button");
    const exitButton = document.getElementById("exit-button");

    // 更新剩餘車位數量
    function updateAvailableSpaces() {
        availableSpacesElement.textContent = availableSpaces;
        checkButtonStates();
    }

    // 檢查按鈕狀態
    function checkButtonStates() {
        if (availableSpaces === 0) {
            enterButton.disabled = true;
        } else {
            enterButton.disabled = false;
        }

        if (availableSpaces === totalSpaces) {
            exitButton.disabled = true;
        } else {
            exitButton.disabled = false;
        }
    }

    // 車輛進入
    enterButton.addEventListener("click", function() {
        if (availableSpaces > 0) {
            availableSpaces--;
            logAction("車輛進入");
            updateAvailableSpaces();
        }
    });

    // 車輛離開
    exitButton.addEventListener("click", function() {
        if (availableSpaces < totalSpaces) {
            availableSpaces++;
            logAction("車輛離開");
            updateAvailableSpaces();
        }
    });

    // 記錄車輛進出
    function logAction(action) {
        const listItem = document.createElement("li");
        const timestamp = new Date().toLocaleTimeString();
        listItem.textContent = `${action} - 時間: ${timestamp}`;
        logList.appendChild(listItem);
    }

    // 初始化
    updateAvailableSpaces();
});

功能描述:

  1. 車位狀態顯示:系統會顯示總車位數量以及剩餘可用車位。
  2. 進出按鈕:當車輛進入或離開時,系統會動態更新剩餘車位數。當車位滿時,「車輛進入」按鈕將會被禁用;當車位空時,「車輛離開」按鈕將會被禁用。
  3. 進出紀錄:每次車輛進出時,系統會記錄時間並顯示在紀錄區域。

1. DOM 準備完成時執行的函數:DOMContentLoaded 事件

document.addEventListener("DOMContentLoaded", function() {
    // 這裡的代碼在網頁完全加載後會被執行
});
  • DOMContentLoaded 是一個事件,當 HTML 文件完全加載並解析完成時(不必等圖像和其他資源),會觸發此事件。我們將主程式碼包裹在這個事件中,以確保當我們嘗試操作 DOM 元素時,它們已經載入完畢。

2. 變數定義

let totalSpaces = 50; // 總車位數量
let availableSpaces = 50; // 剩餘車位數量
  • 定義停車場的車位總數以及當前可用的剩餘車位,預設都為 50。
const totalSpacesElement = document.getElementById("total-spaces");
const availableSpacesElement = document.getElementById("available-spaces");
const logList = document.getElementById("log-list");
const enterButton = document.getElementById("enter-button");
const exitButton = document.getElementById("exit-button");
  • 透過 getElementById 取得 HTML 中對應的元素,這些元素將用來顯示或觸發與停車場管理相關的行為。
    • totalSpacesElement:顯示總車位數。
    • availableSpacesElement:顯示當前剩餘車位數。
    • logList:車輛進出紀錄的 <ul> 列表。
    • enterButtonexitButton:車輛進入和離開的按鈕。

3. 更新剩餘車位數量

function updateAvailableSpaces() {
    availableSpacesElement.textContent = availableSpaces; // 更新剩餘車位的顯示
    checkButtonStates(); // 檢查按鈕狀態
}
  • 這個函數會將最新的剩餘車位數量顯示在畫面上,並呼叫 checkButtonStates 來確保按鈕根據剩餘車位狀況正確啟用或禁用。

4. 檢查按鈕狀態

function checkButtonStates() {
    if (availableSpaces === 0) {
        enterButton.disabled = true; // 當剩餘車位為 0 時,禁用「車輛進入」按鈕
    } else {
        enterButton.disabled = false; // 否則啟用「車輛進入」按鈕
    }

    if (availableSpaces === totalSpaces) {
        exitButton.disabled = true; // 當所有車位都是空的時,禁用「車輛離開」按鈕
    } else {
        exitButton.disabled = false; // 否則啟用「車輛離開」按鈕
    }
}
  • 檢查剩餘車位數量,根據情況決定是否禁用按鈕:
    • 如果剩餘車位為 0,意味著停車場已滿,因此禁用進入按鈕。
    • 如果所有車位都是空的,則禁用離開按鈕,因為沒有車輛可以離開。

5. 車輛進入事件處理

enterButton.addEventListener("click", function() {
    if (availableSpaces > 0) {
        availableSpaces--; // 減少剩餘車位
        logAction("車輛進入"); // 記錄車輛進入
        updateAvailableSpaces(); // 更新顯示的車位數量
    }
});
  • 當點擊「車輛進入」按鈕時觸發此函數。
    • 首先檢查剩餘車位是否大於 0,若大於 0,則減少剩餘車位數。
    • 呼叫 logAction 函數來記錄此動作。
    • 更新車位顯示區域,並啟動按鈕狀態檢查。

6. 車輛離開事件處理

exitButton.addEventListener("click", function() {
    if (availableSpaces < totalSpaces) {
        availableSpaces++; // 增加剩餘車位
        logAction("車輛離開"); // 記錄車輛離開
        updateAvailableSpaces(); // 更新顯示的車位數量
    }
});
  • 當點擊「車輛離開」按鈕時觸發此函數。
    • 檢查剩餘車位是否小於總車位,若小於,則增加剩餘車位數。
    • 呼叫 logAction 函數來記錄此動作。
    • 更新車位顯示區域,並啟動按鈕狀態檢查。

7. 記錄車輛進出

function logAction(action) {
    const listItem = document.createElement("li"); // 建立一個新的列表項目
    const timestamp = new Date().toLocaleTimeString(); // 取得當前時間
    listItem.textContent = `${action} - 時間: ${timestamp}`; // 設定列表項目的內容
    logList.appendChild(listItem); // 將項目添加到紀錄列表中
}
  • 這個函數用來記錄每次車輛進出停車場的動作。
    • 使用 document.createElement 創建一個新的 <li> 列表項目。
    • 使用 new Date().toLocaleTimeString() 來取得當前時間,並將動作(車輛進入或車輛離開)和時間合併成一個字串。
    • 最後將這個新的列表項目添加到 logList 裡,更新網頁上的紀錄列表。

8. 初始化

updateAvailableSpaces();
  • 程式最初會呼叫一次 updateAvailableSpaces,來顯示初始的剩餘車位數並檢查按鈕狀態。

這段程式主要是使用 JavaScript 來實現一個動態管理停車場車位狀況的小系統,通過更新剩餘車位、進出車輛紀錄等來模擬停車場的基本運作。


上一篇
day 5 javascript網頁程式管理系統
下一篇
day 7 javascript自動點名網頁程式管理系統
系列文
Javascript網頁程式管理系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言